<template>
	<view class="home">
		<view class="head">
			<view class="title">
				<text>首页</text>
			</view>

			<view class="user">
				<!-- <image :src="vuex_user.avatar" mode="aspectFill"></image> -->

				<view class="center">
					<view class="t1">
						<text>{{vuex_user.name}}</text>
					</view>
					<view class="t2">
						<text>{{vuex_user.mobile}}</text>
					</view>
					<view class="t2">
						<text>工号：{{vuex_user.assessor_no}}</text>
					</view>
				</view>

				<view class="right">
					<text class="t1">{{complete_num}}</text>
					<text class="t2">已完成考评数</text>
				</view>
			</view>
		</view>

		<!-- 列表 -->
		<view class="list" v-if="newsList.length > 0">
			<block v-for="(item,index) in newsList" :key="index">
				<view class="title">
					<view class=""></view>
					<text>{{item.title}}</text>
				</view>
				<view class="item" v-for="(ite,ind) in item.data" :key='ind' @click="gotoDetail(ite)">
					<image :src="ite.cover" mode="aspectFill"></image>
					<view class="right">
						<view class="t1">
							<text>{{ite.title}}</text>
						</view>
						<view class="t2">
							<text>{{ite.subtitle}}</text>
						</view>
					</view>
				</view>
			</block>
		</view>

		<!-- <view class="list" v-if="newsList.length > 0">
			<view class="title">
				<view class=""></view>
				<text>资讯</text>
			</view>
			<view class="item" v-for="item in newsList" :key='item.id' @click="gotoDetail(item)">
				<image :src="item.cover" mode="aspectFill"></image>
				<view class="right">
					<view class="t1">
						<text>{{item.title}}</text>
					</view>
					<view class="t2">
						<text>{{item.subtitle}}</text>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noticeList: [],
				newsList: [],
				pageSize: 10,
				complete_num: 0
			}
		},
		mounted() {
			this.getList(true)
		},
		methods: {
			getList(refresh) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				//this.geNotice(refresh)
				this.geNews(refresh)
				this.getdata(refresh)
			},
			getdata(refresh) {
				this.$u.post('/getSuccessNumber').then(res => {
					if (refresh) {
						this.complete_num = res.complete_num
					}

				});
			},

			/* geNotice(refresh) {
				const query = {
					information_category_id: 2,
					page: refresh ? 1 : Math.ceil(this.noticeList.length / this.pageSize) + 1,
					list_row: this.pageSize
				}
				this.$u.post('/informationlist', query).then(res => {
					if (refresh) {
						this.noticeList = res.data
					} else {
						this.noticeList.push(...res.data)
					}
				});
			}, */
			/* geNews(refresh) {
				const query = {
					information_category_id: 1,
					page: refresh ? 1 : Math.ceil(this.newsList.length / this.pageSize) + 1,
					list_row: this.pageSize
				}
				this.$u.post('/informationlist', query).then(res => {
					if (refresh) {
						this.newsList = res.data
					} else {
						this.newsList.push(...res.data)
					}
				});
			}, */

			geNews(refresh) {
				const query = {
					page: refresh ? 1 : Math.ceil(this.newsList.length / this.pageSize) + 1,
					list_row: 999
				}
				this.$u.post('/informationlistdata', query).then(res => {
					console.log(123,res)
					if (refresh) {
						this.newsList = res
					} else {
						this.newsList = res
					}
				});
			},

			gotoDetail({
				id,
				title
			}) {
				uni.navigateTo({
					url: `/pagesA/news-detail/news-detail?id=${id}&title=${title}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		width: 750rpx;

		.head {
			width: 100%;
			height: 378rpx;
			padding-top: 106rpx;
			border-radius: 0 0 100rpx 0;
			background-image: linear-gradient(to right, #6ABDDC, #239DC9);

			.title {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 50rpx;
				color: #FFFFFF;
				text-align: center;
			}

			.user {
				margin-top: 46rpx;
				display: flex;
				align-items: center;

				image {
					width: 120rpx;
					height: 120rpx;
					margin-left: 30rpx;
					border-radius: 50%;
				}

				.center {
					flex: 1;
					display: flex;
					flex-direction: column;
					margin-left: 26rpx;
					font-family: PingFang SC;
					color: #FFFFFF;

					.t1 {
						font-size: 36rpx;
						font-weight: bold;
						line-height: 50rpx;
					}

					.t2 {
						margin-top: 6rpx;
						font-size: 24rpx;
						font-weight: 400;
						line-height: 34rpx;
					}
				}

				.right {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-right: 84rpx;
					font-family: PingFang SC;
					color: #FFFFFF;
					font-weight: 400;

					.t1 {
						font-size: 60rpx;
						line-height: 84rpx;
					}

					.t2 {
						font-size: 28rpx;
						line-height: 40rpx;
					}
				}
			}
		}

		.list {
			margin-top: 20rpx;
			padding: 0 30rpx;
			padding-bottom: 10rpx;

			.title {
				display: flex;
				align-items: center;

				view {
					width: 8rpx;
					height: 32rpx;
					background: #3D99BB;
					border-radius: 8rpx;
				}

				text {
					margin-left: 12rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					line-height: 44rpx;
					color: #131415;
				}
			}

			.item {
				margin-top: 16rpx;
				padding-bottom: 12rpx;
				display: flex;

				image {
					width: 222rpx;
					height: 138rpx;
				}

				.right {
					flex: 1;
					margin-left: 32rpx;

					.t1 {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: bold;
						line-height: 42rpx;
						color: #131415;
					}

					.t2 {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 42rpx;
						color: #999999;
					}
				}
			}
		}
	}
</style>
